<template>
  <view class="app-intro-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-title">关于我们</view>
    </view>
    
    <!-- 应用头部信息 -->
    <view class="app-header">
      <image src="https://picsum.photos/id/237/100" mode="widthFix" class="app-logo"></image>
      <view class="app-info">
        <view class="app-name">智慧生活</view>
        <view class="app-version">版本 1.2.0</view>
      </view>
      <button class="download-btn" @click="downloadApp">
        <text class="download-text">立即下载</text>
      </button>
    </view>
    
    <!-- 应用简介 -->
    <view class="app-brief">
      <text class="brief-text">智慧生活是一款集资讯、社交、生活服务于一体的综合性应用，为您提供便捷、智能的移动生活体验。</text>
    </view>
    
    <!-- 核心功能 -->
    <view class="section">
      <view class="section-title">
        <text class="title-text">核心功能</text>
        <view class="title-line"></view>
      </view>
      
      <view class="features-grid">
        <view class="feature-card" v-for="(feature, index) in features" :key="index">
          <view class="feature-icon" :style="{ backgroundColor: feature.color }">
            <icon :type="feature.icon" size="24" color="#ffffff"></icon>
          </view>
          <view class="feature-name">{{ feature.name }}</view>
          <view class="feature-desc">{{ feature.desc }}</view>
        </view>
      </view>
    </view>
    
    <!-- 应用特点 -->
    <view class="section">
      <view class="section-title">
        <text class="title-text">应用特点</text>
        <view class="title-line"></view>
      </view>
      
      <view class="advantages-list">
        <view class="advantage-item" v-for="(advantage, index) in advantages" :key="index">
          <view class="advantage-number">{{ index + 1 }}</view>
          <view class="advantage-content">
            <view class="advantage-title">{{ advantage.title }}</view>
            <view class="advantage-desc">{{ advantage.desc }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 应用截图 -->
    <view class="section">
      <view class="section-title">
        <text class="title-text">应用截图</text>
        <view class="title-line"></view>
      </view>
      
      <view class="screenshots">
        <image 
          :src="screenshot" 
          mode="widthFix" 
          class="screenshot-img" 
          v-for="(screenshot, index) in screenshots" 
          :key="index"
        ></image>
      </view>
    </view>
    
    <!-- 用户评价 -->
    <view class="section">
      <view class="section-title">
        <text class="title-text">用户评价</text>
        <view class="title-line"></view>
      </view>
      
      <view class="reviews-list">
        <view class="review-item" v-for="(review, index) in reviews" :key="index">
          <view class="review-header">
            <image :src="review.avatar" mode="widthFix" class="review-avatar"></image>
            <view class="review-user">
              <view class="review-name">{{ review.name }}</view>
              <view class="review-rating">
                <view class="stars">
                  <icon type="star" size="16" color="#FFD700" v-for="n in 5" :key="n" :class="{ empty: n > review.rating }"></icon>
                </view>
                <view class="review-date">{{ review.date }}</view>
              </view>
            </view>
          </view>
          <view class="review-content">{{ review.content }}</view>
        </view>
      </view>
    </view>
    
    <!-- 底部信息 -->
    <view class="app-footer">
      <view class="copyright">© 2023 智慧生活 版权所有</view>
      <view class="contact-info">联系我们: contact@smartlife.com</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 应用核心功能
      features: [
        {
          name: "智能资讯",
          desc: "根据您的兴趣推荐个性化内容",
          icon: "search",
          color: "#007aff"
        },
        {
          name: "社交互动",
          desc: "结识志同道合的朋友，分享生活",
          icon: "friendsfill",
          color: "#07c160"
        },
        {
          name: "生活服务",
          desc: "便捷查询周边服务，一键预约",
          icon: "service",
          color: "#ff9500"
        },
        {
          name: "智能提醒",
          desc: "重要事项及时提醒，不再忘记",
          icon: "bellfill",
          color: "#ff3b30"
        }
      ],
      
      // 应用优势
      advantages: [
        {
          title: "界面简洁，操作便捷",
          desc: "精心设计的用户界面，让您轻松上手，操作流畅无阻"
        },
        {
          title: "个性化推荐",
          desc: "基于AI算法的智能推荐系统，为您推送感兴趣的内容"
        },
        {
          title: "安全可靠",
          desc: "多重加密保护您的个人信息和隐私安全，使用更放心"
        },
        {
          title: "持续更新",
          desc: "定期更新功能和内容，不断提升用户体验"
        }
      ],
      
      // 应用截图
      screenshots: [
        "https://picsum.photos/id/1/300/600",
        "https://picsum.photos/id/2/300/600",
        "https://picsum.photos/id/3/300/600"
      ],
      
      // 用户评价
      reviews: [
        {
          name: "张先生",
          avatar: "https://picsum.photos/id/1012/100",
          rating: 5,
          date: "2023-06-15",
          content: "这款应用真的很实用，界面简洁大方，功能齐全，推荐给大家使用！"
        },
        {
          name: "李女士",
          avatar: "https://picsum.photos/id/1027/100",
          rating: 4,
          date: "2023-06-10",
          content: "用了一段时间，整体体验不错，特别是资讯推荐很符合我的口味，希望继续优化。"
        },
        {
          name: "王先生",
          avatar: "https://picsum.photos/id/1025/100",
          rating: 5,
          date: "2023-06-05",
          content: "社交功能很赞，认识了很多志同道合的朋友，生活服务也很方便，值得下载！"
        }
      ]
    };
  },
  
  methods: {
    // 下载应用
    downloadApp() {
      uni.showToast({
        title: "正在准备下载...",
        icon: "none",
        duration: 2000
      });
      
      // 实际项目中这里会调用下载接口
      setTimeout(() => {
        uni.showToast({
          title: "下载已开始",
          icon: "success",
          duration: 2000
        });
      }, 1500);
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
.app-intro-page {
  background-color: #f5f5f7;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 导航栏 */
.navbar {
  height: 44px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 应用头部 */
.app-header {
  background-color: #ffffff;
  padding: 30px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.app-logo {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.app-info {
  margin: 0 20px;
  flex: 1;
}

.app-name {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.app-version {
  font-size: 14px;
  color: #666;
}

.download-btn {
  width: 120px;
  height: 40px;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

/* 应用简介 */
.app-brief {
  background-color: #ffffff;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.brief-text {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

/* 通用区块样式 */
.section {
  background-color: #ffffff;
  margin-top: 15px;
  padding: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.title-line {
  flex: 1;
  height: 1px;
  background-color: #eee;
}

/* 功能特点网格 */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.feature-card {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 20px 15px;
  text-align: center;
  transition: transform 0.3s ease;
}

.feature-card:active {
  transform: scale(0.98);
}

.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.feature-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.feature-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 应用优势列表 */
.advantages-list {
  margin-top: 10px;
}

.advantage-item {
  display: flex;
  margin-bottom: 25px;
  position: relative;
  padding-left: 50px;
}

.advantage-item:last-child {
  margin-bottom: 0;
}

.advantage-number {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.advantage-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.advantage-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 应用截图 */
.screenshots {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.screenshot-img {
  width: 220px;
  height: 400px;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* 用户评价 */
.reviews-list {
  margin-top: 10px;
}

.review-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  margin-bottom: 10px;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.review-user {
  flex: 1;
}

.review-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.review-rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stars {
  display: flex;
}

.stars .empty {
  color: #ddd;
}

.review-date {
  font-size: 12px;
  color: #999;
}

.review-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 底部信息 */
.app-footer {
  background-color: #ffffff;
  margin-top: 15px;
  padding: 25px 20px;
  text-align: center;
  border-top: 1px solid #f0f0f0;
}

.copyright {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
}

.contact-info {
  font-size: 14px;
  color: #666;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .app-header {
    flex-direction: column;
    text-align: center;
  }
  
  .app-info {
    margin: 15px 0;
  }
  
  .download-btn {
    margin-top: 10px;
  }
}
</style>
    